<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
    <button @click="changePrice">修改汽车的价格</button>
    <hr />
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum">点我sum + 1</button>
    <button @click="changeBrand">修改汽车品牌</button>
    <button @click="changeCar">修改汽车</button>
  </div>
</template>

<script setup name="Person">
import { ref, reactive } from "vue";
// .value 一定是响应式的
//如果想要一个响应式对象，就用reactive将这个对象包裹
//reactive 只能定义响应式数据
let car = reactive({ brand: "奔驰", price: 100 });
let sum = ref(0);

//reactive 对应的响应式对象是深层次的

function changePrice() {
  car.price += 10;
}

function changeSum() {
  sum.value += 1;
}

function changeBrand() {
  car.brand = "宝马";
}

//运行后不报错，但没用，也没有更改
//我们不可以给 reactive 重新分配一个对象
function changeCar() {
  //car = { brand: "比亚迪", price: 20 };

  /*
  这里补充一下，在changeCar()方法中 car = reactive({ brand: "比亚迪", price: 20 }) 的原因是，原先的reactive是绑定在之前的属性上
  car又对应了新的属性，这时相当于重新绑定了一个新的reactive，已经不是我们原先的那个对象了
  */

  //这里需要补充一点 Object.assign(obj1, obj2, obj3),这个该方法的功能就是把
  //obj2 的属性全部赋给 obj1, 把 obj3 的属性全部赋给 obj2
  Object.assign(car, { brand: "比亚迪", price: "20" });
}
</script>

<style scoped>
.person {
  background-color: #c2e0f6;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>